import react from '@vitejs/plugin-react-swc';
import AutoImport from 'unplugin-auto-import/vite';
import { defineConfig } from 'vite';

// https://vite.dev/config/
export default defineConfig({
  // 路径别名配置
  resolve: {
    alias: {
      '@': '/src',
      '@routers': '/src/routers',
    },
  },
  plugins: [
    react(),
    AutoImport({
      // 自动导入 React Hooks
      imports: [
        {
          react: [
            'useState',
            'useEffect',
            'useContext',
            'useReducer',
            'useCallback',
            'useMemo',
            'useRef',
            'useImperativeHandle',
            'useLayoutEffect',
            'useDebugValue',
          ],
        },
        // 自动导入 Ant Design 的常用工具函数
        {
          from: 'antd',
          imports: ['message', 'notification', 'Modal'],
        },
      ],
      // 生成自动导入的类型声明文件
      dts: true,
      // 自动导入的文件路径
      filepath: './src/auto-imports.d.ts',
      // 是否在开发环境中显示自动导入的信息
      debug: false,
      // Ant Design 组件自动导入解析器
      resolvers: [
        // 支持直接使用 Ant Design 组件，如 Button、Table 等
        componentName => {
          // 检查是否是 Ant Design 组件
          const antdComponents = [
            'Button',
            'Table',
            'Form',
            'Input',
            'Select',
            'Modal',
            'Drawer',
            'Menu',
            'Layout',
            'Card',
            'List',
            'Avatar',
            'Badge',
            'Breadcrumb',
            'Dropdown',
            'Pagination',
            'Steps',
            'Tabs',
            'Timeline',
            'Tree',
            'Alert',
            'Collapse',
            'Tooltip',
            'Popover',
            'Progress',
            'Spin',
            'Result',
            'Skeleton',
            'Empty',
            'Image',
            'Calendar',
            'DatePicker',
            'TimePicker',
            'Upload',
            'Rate',
            'Slider',
            'Switch',
            'Checkbox',
            'Radio',
            'Transfer',
            'Mentions',
            'AutoComplete',
            'Cascader',
            'TreeSelect',
            'InputNumber',
            'Affix',
            'Anchor',
            'BackTop',
            'ConfigProvider',
            'Icon',
            'Typography',
            'Row',
            'Col',
            'Divider',
            'Flex',
            'Grid',
            'Space',
            'Statistic',
            'Descriptions',
            'Comment',
            'FloatButton',
            'QRCode',
            'Segmented',
            'Tour',
            'Watermark',
          ];

          if (antdComponents.includes(componentName)) {
            return {
              name: componentName,
              from: 'antd',
            };
          }
        },
      ],
      // 忽略的文件
      ignore: ['**/dist/**', '**/node_modules/**', '**/*.d.ts'],
    }),
  ],
  // 优化配置
  optimizeDeps: {
    include: ['antd', 'react', 'react-dom'],
  },
  // 构建配置
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          antd: ['antd'],
        },
      },
    },
  },
});
